<template>
	<app-layout>
		<view class="safe-area-inset-bottom">
			<!-- 地址、商户、配送、商品、优惠、费用信息 -->
			<view class="page" v-if="previewData">
				<view v-if="!previewData.hasCity && previewData.show_address !== false && previewData.hasRecipient"
					class="group">
					<app-address-bar :address="previewData.address" :has-ziti="previewData.has_ziti"
						:all-ziti="previewData.allZiti" @address-input="handleAddressInput"></app-address-bar>
				</view>
				<template v-for="(mch, mchIndex) in previewData.mch_list">
					<view v-if="previewData.hasCity && mchIndex === 0" class="group">
						<app-address-bar :address="mch.city.error ? null : mch.address" :has-city="true"
							:city="mch.city"></app-address-bar>
					</view>
					<view v-if="previewData.hasCity && mchIndex === 1" class="group">
						<app-address-bar :address="previewData.address" :has-ziti="previewData.has_ziti"
							:all-ziti="previewData.allZiti" :city="mch.city"></app-address-bar>
					</view>
					<view :key="mchIndex" class="group">
						<!-- 循环商户列表start -->
						<view style="padding: 26rpx 32rpx;">
							<view class="dir-left-nowrap cross-center" style="padding: 10rpx 0;">
								<!-- 商户名start -->
								<view class="box-grow-0">
									<image src="/static/image/icon/store-black.png" class="title-icon mr-12"></image>
								</view>
								<view class="box-grow-1 font-bold ellipsis-1">{{mch.mch.name}}</view>
								<view
									v-if="mch.mch.id > 0 && mch.delivery.send_type == 'offline' && mch.store && mch.store.distance != '-m'"
									class="box-grow-0 dir-left-nowrap cross-center">
									<image src="/static/image/icon/location.png" class="mr-12"
										style="display: block; width: 22rpx;height: 26rpx;"></image>
									<view>距您{{mch.store.distance}}</view>
								</view>
							</view>
							<!-- 商户名end -->
							<template v-if="mch.delivery.send_type == 'offline'">
								<!-- 自提门店信息start -->
								<view v-if="mch.no_store && mch.no_store === true" :class="[themeTextClass]"
									style="padding: 10rpx 0;">暂无门店，请选择其他配送方式
								</view>
								<template v-else>
									<template v-if="mch.store">
										<view v-if="mch.mch.id == 0" class="dir-left-nowrap" style="padding: 10rpx 0;">
											<view @click="navigateStore(mchIndex)"
												class="box-grow-1 dir-left-nowrap cross-center">
												<view>
													<image src="/static/image/icon/navigation-black.png"
														class="title-icon mr-12"></image>
												</view>
												<view class="font-bold ellipsis-1 mr-12">
													{{mch.store.name}}
												</view>
												<view class="mr-12">
													<image src="/static/image/icon/right.png" class="mr-12"
														style="width: 12rpx; height: 22rpx;"></image>
												</view>
											</view>
											<view v-if="mch.store.distance != '-m' || getLocationFail"
												class="box-grow-0 dir-left-nowrap cross-center">
												<view>
													<image src="/static/image/icon/location.png" class="mr-12"
														style="display: block; width: 22rpx;height: 26rpx;"></image>
												</view>
												<view v-if="getLocationFail" @click.stop="openLocationSetting"
													:class="[`${theme}-color`, `${theme}-border`,]">获取位置
												</view>
												<view v-else-if="mch.store.distance != '-m'">距您{{mch.store.distance}}
												</view>
											</view>
										</view>
										<view style="padding: 10rpx 0;">
											<view class="font-gray ellipsis-2"
												style="line-height: 30rpx; max-height: 60rpx;">
												{{mch.store.address}}
											</view>
										</view>
									</template>
									<view v-else class="dir-left-nowrap cross-center" @click="navigateStore(mchIndex)"
										style="padding: 10rpx 0;">
										<view class="box-grow-1 dir-left-nowrap">
											<image src="/static/image/icon/navigation-black.png"
												class="title-icon mr-12"></image>
											<view class="mr-12 font-bold">选择门店</view>
										</view>
										<view class="box-grow-0 dir-left-nowrap cross-center">
											<view class="mr-12 font-gray">请选择门店</view>
											<image src="/static/image/icon/arrow-right.png" class="mr-12"
												style="width: 12rpx; height: 22rpx;"></image>
										</view>
									</view>
								</template>
							</template><!-- 自提门店信息end -->
						</view>
						<view class="line"></view>
						<!-- 选择配送方式start -->
						<view v-if="mch.show_delivery !== false" style="padding: 18rpx 32rpx;">
							<view class="dir-left-nowrap cross-center" style="padding: 18rpx 0;">
								<view class="box-grow-0">
									<image src="/static/image/icon/delivery.png" class="title-icon mr-12"></image>
								</view>
								<view class="box-grow-1 font-bold">配送方式</view>
							</view>
							<view class="dir-left-nowrap" style="padding: 18rpx 0;">
								<view v-for="(sendType, sendTypeIndex) in mch.delivery.send_type_list"
									:key="sendTypeIndex" class="send-type"
									:class="sendType.value == mch.delivery.send_type && userTheme ? `${theme}-background theme-color` : sendType.value == mch.delivery.send_type && !userTheme ? theme + '-m-back theme-color ' + theme : 'app-light-gray-back' "
									@click="changeSendType(mchIndex,sendType.value)">
									{{sendType.name}}
								</view>
							</view>
						</view>
						<!-- 选择配送方式end -->
						<!-- 同城配送信息start -->
						<template v-if="mch.delivery.send_type == 'city' && mch.city">
							<view class="line"></view>
							<view v-if="mch.city.error" class="dir-left-nowrap cross-center"
								style="padding: 36rpx 32rpx;">
								<view class="box-grow-1">{{mch.city.error}}</view>
								<view class="box-grow-0 dir-left-nowrap delivery-coverage-btn" @click="jump(mchIndex)"
									style="margin: -12rpx 0;">查看配送范围
								</view>
							</view>
							<view v-else style="padding: 36rpx 32rpx;">
								<view style="padding: 10rpx 0;">发货地址：{{mch.city.address}}</view>
								<view class="dir-left-nowrap cross-center" style="padding: 10rpx 0;">
									<view class="box-grow-1">
										<view v-if="mch.city.explain">{{mch.city.explain}}</view>
									</view>
									<view class="box-grow-0 dir-left-nowrap delivery-coverage-btn"
										@click="jump(mchIndex)">查看配送范围
									</view>
								</view>
							</view>
						</template>
						<!-- 同城配送信息end -->
						<view class="line"></view>

						<template>
							<view style="padding: 20rpx 32rpx;">
								<template>
									<view @click="showCouponPicker(mchIndex)" style="padding: 16rpx 0;">
										<view class="dir-left-nowrap cross-center">
											<view class="box-grow-1">优惠券</view>
											<view class="box-grow-0 mr-12" v-if="mch.coupon.use"
												:class="[themeTextClass]">
												-¥{{mch.coupon.coupon_discount}}
											</view>
											<view class="box-grow-0 mr-12 font-gray"
												v-else-if="noCouponStatus(mchIndex)">
												暂无优惠券可用
											</view>
											<view class="box-grow-0 mr-12 font-gray" v-else>选择优惠券</view>
											<view class="box-grow-0">
												<image src="/static/image/icon/arrow-right.png"
													style="width: 12rpx; height: 22rpx; margin-bottom: -2rpx;"></image>
											</view>
										</view>
									</view>
									<app-bottom-modal :visible.sync="mch.showCouponPicker" title="优惠券">
										<app-coupon-pick :plugin="plugin" :mch-index="mchIndex"
											@change="loadPreviewData" :no-coupons.sync="mch.noCoupons" :theme="theme">
										</app-coupon-pick>
									</app-bottom-modal>
								</template>
							</view>
							<view class="line"></view>
						</template>
						<!-- 运费信息start -->
						<template v-if="mch.show_express_price !== false">
							<view class="dir-left-nowrap cross-center" style="height: 84rpx; padding: 0 32rpx;">
								<view class="box-grow-1">运费</view>
								<view class="box-grow-0" :class="[themeTextClass]" style="text-align: right;">
									<template v-if="mch.express_price_origin && mch.express_price_desc">
										<view :class="theme + '-m-text ' + theme">￥{{mch.express_price_origin}}</view>
										<view class="express-price-desc" :class="theme + '-m-text ' + theme">
											{{mch.express_price_desc}}
										</view>
									</template>
									<template v-else>￥{{mch.express_price}}</template>
								</view>
							</view>
						</template>
						<!-- 运费信息end -->
						<template
							v-if="!(mch.order_form && mch.order_form.status == '1') && mch.show_remark !== false && mch.has_goods_form !== true">
							<view class="line"></view>
							<view class="row" style="padding-top: 0;padding-bottom: 0;">
								<app-input @input="inputRemark(mchIndex)" v-model="mch.remark" placeholder="买家留言"
									padding-left="0" height="100"></app-input>
							</view>
						</template>
						<view class="line"></view>
						<view class="dir-right-nowrap cross-center" style="height: 84rpx; padding: 0 32rpx;">
							<view class="box-grow-0 dir-left-nowrap">
								<view>小计：</view>
								<view :class="[themeTextClass]">¥{{mch.total_price}}</view>
							</view>
							<view class="box-grow-0 font-gray mr-12">共{{mch.goods_count}}件</view>
						</view>
					</view><!-- 循环商户列表end -->
				</template>
				<view v-for="(mch, mchIndex) in previewData.mch_list" :key="mchIndex">
					<template v-if="mch.has_goods_form">
						<view v-for="(goodsItem, goodsIndex) in mch.goods_list" :key="goodsIndex"
							v-if="goodsItem.form && !goodsItem.form.same_form" class="group goods-form">
							<view style="padding: 36rpx 32rpx;" class="font-bold">{{goodsItem.form.name}}</view>
							<view class="line"></view>
							<view class="row goods-list"
								v-if="mch.diff_goods_form_count !== 1 || previewData.mch_list.length > 1">
								<view v-for="(subGoodsItem, subGoodsIndex) in mch.goods_list" :key="subGoodsIndex"
									v-if="subGoodsItem.form && subGoodsItem.form.id == goodsItem.form.id"
									class="dir-left-nowrap goods-item">
									<view class="box-grow-0">
										<image class="goods-image"
											:src="subGoodsItem.goods_attr.pic_url ? subGoodsItem.goods_attr.pic_url : subGoodsItem.cover_pic">
										</image>
									</view>
									<view class="box-grow-1">
										<view class="goods-name ellipsis-2">
											{{subGoodsItem.name}}
										</view>
										<view class="dir-left-wrap">
											<view v-for="(attrItem,attrIndex) in subGoodsItem.attr_list"
												:key="attrIndex" class="mr-12 font-gray font-small">
												{{attrItem.attr_group_name}}:{{attrItem.attr_name}}
											</view>
										</view>
										<view class="dir-left-nowrap">
											<view class="box-grow-1 font-gray font-small">×{{subGoodsItem.num}}</view>
											<view class="box-grow-0">
												<view class="font-small" style="text-align: right"
													:class="theme + '-m-text ' + theme">
													<text
														v-for="(customCurrency,customCurrencyIndex) in subGoodsItem.custom_currency"
														:key="customCurrencyIndex">
														{{customCurrency}}+
													</text>
													￥{{subGoodsItem.total_original_price}}
												</view>
												<view v-for="(discount,discountIndex) in subGoodsItem.discounts"
													:key="discountIndex" style="text-align: right"
													:class="theme + '-m-text ' + theme">
													{{discount.name}}: {{discount.value}}
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</template>
				</view>
			</view>
		</view>
		<!-- 结算底栏 -->
		<view class="submit-bar dir-left-nowrap safe-area-inset-bottom" v-if="previewData">
			<view class="box-grow-1 cross-center u-submit-bar-height">
				<view class="price-info">
					<view :class="[themeTextClass]" style="font-size: 26rpx;">
						{{totalTitle}}:
						<text v-for="(custom_currency, ccIndex) in previewData.custom_currency_all" :key="ccIndex">
							{{custom_currency}}+
						</text>
						<template v-if="previewData.vip_card_discount_total_price">
							￥{{previewData.vip_card_discount_total_price}}
						</template>
						<template v-else>￥{{previewData.total_price}}</template>
					</view>
				</view>
			</view>
			<template v-if="previewData.address_enable && previewData.price_enable">
				<view @click="subscribe" class="submit-btn u-submit-bar-height box-grow-0 main-center cross-center"
					:class="[ submitLock? ' lock' : '', themeBgClass]">
					<view style="background-color: transparent;color:#ffffff; text-align: center;">提交</view>
				</view>
			</template>
			<template v-else>
				<view class="submit-btn u-submit-bar-height box-grow-0 main-center cross-center disabled"
					:class="[themeBgClass]">
					<view style="background-color: transparent;color: #ffffff; text-align: center;">提交</view>
				</view>
			</template>
		</view>
	</app-layout>
</template>
<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import AppCouponPick from "../components/app-coupon-pick.vue";
	import AppBottomModal from "../components/app-bottom-modal.vue";
	import AppAddressBar from "../components/app-address-bar.vue";

	export default {
		name: 'order-submit',
		components: {
			AppAddressBar,
			AppBottomModal,
			AppCouponPick
		},
		data() {
			return {
				totalTitle: '合计',
				check: false,
				previewData: {
					mch_list: [],
					total_price: 0,
					vip_card_discount_total_price: null,
					custom_currency_all: []
				},
				getLocationFail: false,
				previewUrl: null,
				submitUrl: null,
				plugin: null,
				orderPageUrl: null,
				submitLock: false,
				getPayDataTimer: null,
				userTheme: null,
				payDataUrl: null,
				showPayResult: true,
				payCancelUrl: null,
				loadingPreviewData: true,
			};
		},
		computed: {
			...mapState({
				appImg: state => state.mallConfig.__wxapp_img,
			}),
			theme() {
				return this.userTheme ? this.userTheme : this.getTheme;
			},
			...mapGetters('mallConfig', {
				getTheme: 'getTheme',
			}),
			themeBgClass() {
				if (this.theme.indexOf('gift') >= 0) {
					return `${this.theme} ${this.theme}-background`;
				} else {
					return `${this.theme} ${this.theme}-m-back`;
				}
			},
			themeTextClass() {
				if (this.theme.indexOf('gift') >= 0) {
					return `${this.theme} ${this.theme}-color`;
				} else {
					return `${this.theme} ${this.theme}-m-text`;
				}
			},
		},
		onLoad(options) {
			if (this.submitLock) return;
			this.setFormData(options);
			this.$event.on(this.$const.EVENT_USER_LOGIN).then(() => {
				this.loadPreviewData();
			});
		},
		onShow() {
			if (this.submitLock) return;
			// #ifdef MP-BAIDU
			setTimeout(() => {
				this.loadPreviewData();
			}, 50);
			// #endif
			// #ifndef MP-BAIDU
			this.loadPreviewData();
			// #endif
		},
		onUnload() {
			if (this.getPayDataTimer) {
				clearTimeout(this.getPayDataTimer);
			}
		},
		watch: {
			'previewData.address.name': {
				handler() {
					this.changeZitiAddress();
				},
			},
			'previewData.address.mobile': {
				handler() {
					this.changeZitiAddress();
				},
			},
		},
		methods: {
			noCouponStatus(mchIndex) {
				const mchNoCouponStatusList = this.$store.getters['orderSubmit/getMchNoCouponStatusList'];
				if (mchNoCouponStatusList[mchIndex])
					return true;
				else
					return false;
			},
			navigateVipCardPrivilege() {
				uni.navigateTo({
					url: '/plugins/vip_card/rights/rights?id=1',
				});
			},
			showCouponPicker(index) {
				this.previewData.mch_list[index].showCouponPicker = true;
			},
			reversalShowInsertRows(index) {
				this.previewData.mch_list[index].showInsertRows = !this.previewData.mch_list[index].showInsertRows;
			},
			updateList(e, index) {
				this.previewData.mch_list[index] = e;
				this.$forceUpdate();
			},
			setParams(options) {
				if (options.total_title) {
					this.totalTitle = options.total_title;
				}
			},
			handleOrderFormInput(data, sign) {
				const result = [];
				for (let i in data) {
					result[i] = {
						key: data[i].key,
						label: data[i].name,
						value: data[i].value,
						required: data[i].is_required,
					};
				}
				const formData = this.$store.state.orderSubmit.formData;
				formData.list[sign].order_form = result;
				this.$store.commit('orderSubmit/mutSetFormData', formData);
			},
			handleOrderFormValidate(result, sign) {
				const formData = this.$store.state.orderSubmit.formData;
				formData.list[sign].order_form_validate_result = result;
				this.$store.commit('orderSubmit/mutSetFormData', formData);
			},
			setFormData(options) {
				this.previewUrl = decodeURIComponent(options.preview_url || this.$apiSol.order.preview);
				this.submitUrl = decodeURIComponent(options.submit_url || this.$apiSol.order.submit);
				this.plugin = options.plugin || null;
				this.orderPageUrl = decodeURIComponent(options.order_page_url || '/pages/order/index/index?status=0');
				this.userTheme = options.theme || null;
				this.payDataUrl = decodeURIComponent(options.pay_data_url || this.$apiSol.order.pay_data);
				this.payCancelUrl = options.pay_cancel_url ? decodeURIComponent(options.pay_cancel_url) : null;
				this.showPayResult = options.show_pay_result || true;
				if (this.showPayResult === 'true') this.showPayResult = true;
				if (this.showPayResult === 'false') this.showPayResult = false;
				const list = JSON.parse(options.mch_list);

				// 商户列表先做下排序，主商城必须在最前
				for (let i in list) {
					if (parseInt(list[i].mch_id) === 0) {
						const _mchItem = list[i];
						list.splice(i, 1);
						list.unshift(_mchItem);
						break;
					}
				}

				for (let i in list) {
					list[i].distance = 0;
					list[i].remark = '';
					list[i].order_form = [];
					list[i].use_integral = 0;
					list[i].user_coupon_id = 0;
					for (let j in list[i].goods_list) {
						list[i].goods_list[j].cart_id = list[i].goods_list[j].cart_id || 0;
					}
				}
				this.$store.commit('orderSubmit/mutSetFormData', {
					list: list,
					address_id: 0,
				});
			},
			loadPreviewData() {
				this.loadingPreviewData = true;
				uni.showLoading({
					mask: true,
					title: '加载中',
				});
				this.$request({
					url: this.previewUrl,
					method: 'post',
					data: {
						form_data: JSON.stringify(this.$store.state.orderSubmit.formData),
					},
				}).then(response => {
					this.loadingPreviewData = false;
					uni.hideLoading();
					if (response.code === 0) {
						if (response.data.allZiti && !response.data.address) {
							response.data.address = {
								name: '',
								mobile: '',
							};
						}
						for (let i in response.data.mch_list) {
							response.data.mch_list[i].showCouponPicker = false;
							response.data.mch_list[i].noCoupons = false;
							response.data.mch_list[i].showInsertRows = false;
						}
						this.previewData = response.data;
						console.log(this.previewData);
						this.setDiyFormScrollStatus();
						this.checkCouponError();
						this.updateStoreDistance();
						this.updateGoodsCount();
					} else {
						uni.showModal({
							title: '提示',
							content: response.msg,
							showCancel: false,
							success: () => {
								uni.navigateBack();
							},
						});
					}
				}).catch(() => {
					this.loadingPreviewData = false;
					uni.hideLoading();
				});
			},
			navigateStore(mchIndex) {
				console.log(mchIndex)
				console.log(this.previewData)
				/* 单个自提点 */
				/* if (this.previewData.mch_list[mchIndex].mch.id != 0) {
					return;
				} */
				let firstGoodsId = '';
				if (this.plugin === 'booking') {
					firstGoodsId = this.previewData.mch_list[0].goods_list[0].id;
				}
				let plugin = this.plugin || '';
				uni.navigateTo({
					url: `/pages/order-submit/store-pick?mchIndex=${mchIndex}&plugin=${plugin}&firstGoodsId=${firstGoodsId}`,
				});
			},
			navigateCoupon(mchIndex) {
				uni.navigateTo({
					url: `/pages/order-submit/coupon-pick?mchIndex=${mchIndex}`,
				});
			},
			navigateSvip(mchIndex) {
				uni.navigateTo({
					url: `/pages/order-submit/vip-card?mchIndex=${mchIndex}`,
				});
			},
			changeZitiAddress() {
				const formData = this.$store.state.orderSubmit.formData;
				formData.address = {
					name: this.previewData.address ? this.previewData.address.name : '',
					mobile: this.previewData.address ? this.previewData.address.mobile : '',
				};
				this.$store.commit('orderSubmit/mutSetFormData', formData);
			},
			changeSendType(mchIndex, value) {
				if (this.previewData.mch_list[mchIndex].delivery.send_type == value) return;
				const formData = this.$store.state.orderSubmit.formData;
				formData.list[mchIndex].send_type = value;
				this.$store.commit('orderSubmit/mutSetFormData', formData);
				this.previewData.mch_list[mchIndex].delivery.send_type = value;
				this.loadPreviewData();
			},
			updateStoreDistance() {
				if (!this.previewData) return;
				if (!this.previewData.has_ziti && this.plugin != 'booking') {
					return;
				}
				uni.getLocation({
					success: (res) => {
						for (let i in this.previewData.mch_list) {
							if (!this.previewData.mch_list[i].store) {
								continue;
							}
							if (this.previewData.mch_list[i].store.distance &&
								this.previewData.mch_list[i].store.distance != '-m') {
								continue;
							}
							if (
								this.previewData.mch_list[i].store.latitude == '' ||
								this.previewData.mch_list[i].store.longitude == '' ||
								isNaN(this.previewData.mch_list[i].store.latitude) ||
								isNaN(this.previewData.mch_list[i].store.longitude)
							) {
								continue;
							}
							const distance = this.$utils.earthDistance({
								lat: res.latitude,
								lng: res.longitude
							}, {
								lat: this.previewData.mch_list[i].store.latitude,
								lng: this.previewData.mch_list[i].store.longitude
							});
							let distanceStr = '-m';
							if (distance > 1000) {
								distanceStr = (distance / 1000).toFixed(2) + 'km';
							} else {
								distanceStr = distance.toFixed(0) + 'm';
							}
							this.previewData.mch_list[i].store.distance = distanceStr;
						}
					},
					fail: () => {
						this.getLocationFail = true;
					},
				});
			},
			openLocationSetting() {
				this.getLocationFail = false;
				uni.openSetting({});
			},
			showIntegralTip() {
				uni.showModal({
					title: '积分抵扣说明',
					content: this.$store.state.mallConfig.mall.setting.member_integral_rule,
					showCancel: false,
				});
			},
			changeIntegral(mchIndex) {
				const formData = this.$store.state.orderSubmit.formData;
				const use = !this.previewData.mch_list[mchIndex].integral.use;
				formData.list[mchIndex].use_integral = use ? 1 : 0;
				this.previewData.mch_list[mchIndex].integral.use = use;
				this.loadPreviewData();
			},
			inputRemark(mchIndex) {
				const formData = this.$store.state.orderSubmit.formData;
				formData.list[mchIndex].remark = this.previewData.mch_list[mchIndex].remark;
				this.$store.commit('orderSubmit/mutSetFormData', formData);
			},
			submit() {
				uni.showLoading({
					mask: true,
					title: '提交中',
				});
				this.$request({
					url: this.submitUrl,
					method: 'post',
					data: {
						form_data: JSON.stringify(this.$store.state.orderSubmit.formData),
					},
				}).then(response => {
					if (response.code === 0) {
						this.getPayOrderId(response.data.queue_id, response.data.token);
					} else {
						this.submitLock = false;
						uni.hideLoading();
						uni.showModal({
							title: '提示',
							content: response.msg,
							showCancel: false,
						});
					}
				}).catch(e => {
					this.submitLock = false;
					uni.hideLoading();
					uni.showModal({
						title: '提示',
						content: e.errMsg,
						showCancel: false,
					});
				});
			},
			getPayOrderId(queue_id, token) {
				this.$request({
					url: this.payDataUrl,
					method: 'post',
					data: {
						queue_id: queue_id,
						token: token,
					},
				}).then(response => {
					if (response.code === 0) {
						if (response.data.retry && response.data.retry === 1) {
							this.getPayDataTimer = setTimeout(() => {
								this.getPayOrderId(queue_id, token);
							}, 1000);
						} else {
							uni.hideLoading();
							this.pay(response.data);
						}
					} else {
						this.submitLock = false;
						uni.hideLoading();
						uni.showModal({
							title: '提示',
							content: response.msg,
							showCancel: false,
						});
					}
				}).catch(e => {
					this.submitLock = false;
					uni.hideLoading();
					uni.showModal({
						title: '提示',
						content: e.errMsg,
						showCancel: false,
					});
				});
			},
			pay(data) {
				this.$payment.solpay(data.id).then(res => {
					if (this.showPayResult) {
						uni.redirectTo({
							url: `/pages/order-submit/pay-result?payment_order_union_id=${data.id}&order_page_url=${encodeURIComponent(this.orderPageUrl)}`,
						});
					} else {

						let page_url = this.orderPageUrl;
						if (page_url.indexOf('?') === -1) {
							page_url += '?'
						} else {
							page_url += '&';
						}

						delete data.id;

						page_url += `pay_data=${JSON.stringify(data)}`;

						uni.redirectTo({
							url: page_url,
						});
					}
				}).catch(e => {
					if (this.payCancelUrl) {
						let page_url = this.payCancelUrl;
						if (page_url.indexOf('?') === -1) {
							page_url += '?'
						} else {
							page_url += '&';
						}
						page_url += `pay_data=${JSON.stringify(data)}`;
						uni.redirectTo({
							url: page_url,
						});
					} else {
						uni.showModal({
							title: '提交失败',
							content: e.errMsg,
							showCancel: false,
							success: () => {
								uni.redirectTo({
									url: this.orderPageUrl,
								});
							},
						});
					}
				});
			},
			jump(mchIndex) {
				uni.navigateTo({
					url: `/pages/order-submit/map`,
				});
			},
			checkCouponError() {
				for (let i in this.previewData.mch_list) {
					if (this.previewData.mch_list[i].coupon && this.previewData.mch_list[i].coupon.coupon_error) {
						uni.showModal({
							title: '',
							content: this.previewData.mch_list[i].coupon.coupon_error,
							showCancel: false,
						});
						return;
					}
				}
			},
			setDiyFormScrollStatus() {
				for (let i in this.previewData.mch_list) {
					if (
						this.previewData.mch_list[i].order_form
					) {
						if (
							this.previewData.mch_list[i].order_form.value &&
							this.previewData.mch_list[i].order_form.value.length &&
							this.previewData.mch_list[i].order_form.value.length >= 5
						) {
							this.previewData.mch_list[i].order_form.show_scroll = true;
						} else {
							this.previewData.mch_list[i].order_form.show_scroll = false;
						}
					}
				}
			},
			subscribe() {
				for (let i in this.$store.state.orderSubmit.formData.list) {
					const item = this.$store.state.orderSubmit.formData.list[i];
					if (!item.order_form_validate_result) continue;
					if (item.order_form_validate_result.hasError) {
						uni.showModal({
							title: '提示',
							content: item.order_form_validate_result.errors[0].msg,
							showCancel: false,
						});
						return;
					}
				}
				for (let i in this.$store.state.orderSubmit.formData.list) {
					for (let j in this.$store.state.orderSubmit.formData.list[i].goods_list) {
						const item = this.$store.state.orderSubmit.formData.list[i].goods_list[j];
						if (!item.goods_form_validate_result) continue;
						if (item.goods_form_validate_result.hasError) {
							uni.showModal({
								title: '提示',
								content: item.goods_form_validate_result.errors[0].msg,
								showCancel: false,
							});
							return;
						}
					}
				}
				if (this.submitLock) return;
				this.submitLock = true;
				this.$subscribe(this.previewData.template_message_list).then(res => {
					this.submit();
				}).catch(res => {
					this.submit();
				});
			},
			handleGoodsFormInput(data, sign) {
				const signArr = sign.split(',');
				const mchIndex = parseInt(signArr[0]);
				const goodsIndex = parseInt(signArr[1]);
				const formId = parseInt(signArr[2]);
				const result = [];
				for (let i in data) {
					result[i] = {
						key: data[i].key,
						label: data[i].name,
						value: data[i].value,
						required: data[i].is_required,
					};
				}
				const formData = this.$store.state.orderSubmit.formData;
				formData.list[mchIndex].goods_list[goodsIndex].form_data = result;
				this.$store.commit('orderSubmit/mutSetFormData', formData);
			},
			handleGoodsFormValidate(result, sign) {
				const signArr = sign.split(',');
				const mchIndex = parseInt(signArr[0]);
				const goodsIndex = parseInt(signArr[1]);
				const formData = this.$store.state.orderSubmit.formData;
				formData.list[mchIndex].goods_list[goodsIndex].goods_form_validate_result = result;
				this.$store.commit('orderSubmit/mutSetFormData', formData);
			},
			updateGoodsCount() {
				for (let i in this.previewData.mch_list) {
					let count = 0;
					for (let j in this.previewData.mch_list[i].goods_list) {
						count += parseInt(this.previewData.mch_list[i].goods_list[j].num);
					}
					this.previewData.mch_list[i].goods_count = count;
				}
			},
			handleAddressInput(e) {
				if (typeof e.name !== 'undefined') this.previewData.address.name = e.name;
				if (typeof e.mobile !== 'undefined') this.previewData.address.mobile = e.mobile;
			},
		},
	}
</script>
<style scoped lang="scss">
	$submitBarHeight: #{110rpx};
	$borderColor: $uni-weak-color-one;
	$xWidth: #{24rpx};
	$yWidth: #{24rpx};

	.page {
		padding-bottom: $submitBarHeight;
		font-size: #{28rpx};
		line-height: 1;
		color: #353535;
	}

	.u-submit-bar-height {
		height: $submitBarHeight;
	}

	.group {
		margin: #{20rpx} #{26rpx};
		background: #fff;
		border-radius: #{16rpx};
		overflow: hidden;
		box-shadow: 0 0 #{5rpx} rgba(0, 0, 0, 0.025);
	}

	.row {
		padding: #{12rpx} #{32rpx};
	}

	.row.no-px {
		padding-left: 0;
		padding-right: 0;
	}

	.line {
		height: 0;
		width: 100%;
		background: #e2e2e2;
		border-bottom: #{1rpx} solid #e2e2e2;
	}

	.font-bold {
		font-weight: bold;
	}

	.font-small {
		font-size: #{24rpx};
	}

	.font-gray {
		color: #999999;
	}

	.title-icon {
		width: #{28rpx};
		height: #{25rpx};
		display: block;
	}

	.mr-12 {
		margin-right: #{12rpx};
	}

	.ellipsis-1 {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.ellipsis-2 {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		overflow: hidden;
	}


	.send-type {
		display: inline-block;
		padding: 0 0;
		height: #{56rpx};
		line-height: #{56rpx};
		width: #{190rpx};
		text-align: center;
		border-radius: #{100rpx};
		margin: 0 #{32rpx} 0 0;
		font-size: #{28rpx};
	}

	.send-type:last-child {
		margin-right: 0;
	}

	.delivery-coverage-btn {
		display: inline-block;
		padding: 0 #{20rpx};
		height: #{56rpx};
		line-height: #{56rpx};
		text-align: center;
		border-radius: #{100rpx};
		font-size: #{24rpx};
		border: #{1rpx} solid #e5e5e5;
		color: #666;
	}

	.more-discount-info {
		background: #f7f7f7;
		padding: #{6rpx} #{14rpx};
		position: relative;
		border-radius: #{8rpx};
	}

	.more-discount-info:before {
		display: block;
		content: " ";
		width: 0;
		height: 0;
		position: absolute;
		right: #{30rpx};
		top: -#{39rpx};
		border: #{20rpx} solid transparent;
		border-bottom-color: #f7f7f7;
	}

	.insert-rows {
		height: 0;
		overflow: hidden;
		transition: 200ms;
		padding: 0 0;
		visibility: hidden;

		view {
			font-size: #{24rpx};
		}
	}

	.show .insert-rows {
		height: auto;
		padding: #{24rpx} 0;
		visibility: visible;
	}

	.show .bottom-icon,
	.bottom-icon.show {
		transform: rotate(180deg);
		transition: 200ms;
	}

	.svip {
		view {
			color: #e4cdbb;
		}

		height: #{120rpx};
		background-size: 100% 100%;
		background-color: #3c352e;
		padding-left: #{110rpx};
		border-radius: #{12rpx};

		.vip-card-name {
			max-width: #{90rpx};
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			font-size: #{24rpx};
			color: #f3be94;
		}
	}

	.goods-form {
		.goods-list {
			padding-top: #{12rpx};
			padding-bottom: #{12rpx};
		}

		.goods-item {
			margin: #{12rpx} 0;
		}

		.goods-image {
			width: #{200rpx};
			height: #{200rpx};
			margin-right: #{24rpx};
		}

		.goods-name {
			line-height: #{35rpx};
			height: #{70rpx};
			margin-bottom: #{32rpx};
		}
	}

	/* ---------- */


	.submit-bar {
		background: #fff;
		border-top: #{1rpx} solid $uni-weak-color-two;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 1000;

		.price-info {
			padding: 0 #{24rpx};

			>view {
				margin: #{16rpx} 0;
			}
		}

		.submit-btn {
			width: #{300rpx};
			text-align: center;
		}

		.submit-btn:active {
			box-shadow: inset 0 0 #{500rpx} rgba(0, 0, 0, .15);
		}

		.submit-btn.lock {
			box-shadow: inset 0 0 #{500rpx} rgba(255, 255, 255, 0.35);
		}

		.submit-btn.disabled {
			background: $uni-general-color-two;
		}
	}

	.theme-color {
		color: #ffffff;
	}
</style>
